<template>
  <div class="login-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">
        用户登录
      </h2>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" show-password />
      </el-form-item>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input v-model="form.code" type="text" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitForm('form')" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="code-box">
          <img :src="form.codeimg" alt="" class="codeimg" @click="getcode()">
        </el-col>
      </el-row> -->
      <el-checkbox v-model="rememberpwd" class="remember">
        记住密码
      </el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" :loading="logining" @click="submitForm('form')">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
// import md5 from 'js-md5'
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
export default {
  data () {
    return {
      // 定义loading默认为false
      logining: false,
      // 记住密码
      rememberpwd: false,
      form: {
        // username和password默认为空
        username: '',
        password: '',
        code: '',
        randomStr: '',
        codeimg: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 1, max: 30, message: '用户名1-30位', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 1, max: 255, message: '密码1-255位', trigger: 'blur' }
        ]
      }
    }
  },
  // 创建完毕状态(里面是操作)
  created () {
    // 获取图形验证码
    // this.getcode()
    // 获取存在本地的用户名密码
    this.getuserpwd()
  },
  methods: {
    // 半成品
    // submitForm (formName) {
    //   this.$refs[formName].validate((valid) => {
    //     // console.log(valid) 验证通过为true，有一个不通过就是false
    //     if (valid) {
    //       // 通过的逻辑
    //       login(this.form)
    //         .then((res) => {
    //           if (res.code === 0) {
    //             this.$router.push({ path: '/frontsystem' })
    //             this.$message({
    //               type: 'success',
    //               message: '登录成功！'
    //             })
    //           } else {
    //             this.$message({
    //               type: 'info',
    //               message: res.msg
    //             })
    //           }
    //         })
    //     } else {
    //       // eslint-disable-next-line no-console
    //       console.log('登录失败')
    //       return false
    //     }
    //   })
    // }
    // 获取用户名密码
    getuserpwd () {
      if (getCookie('user') !== '' && getCookie('pwd') !== '') {
        this.form.username = getCookie('user')
        this.form.password = getCookie('pwd')
        this.rememberpwd = true
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.logining = true
          // 测试通道不需要正确账户密码，不为空直接登录
          // setTimeout(() => {
          //   this.logining = false
          //   this.$store.commit('login', 'true')
          //   this.$router.push({ path: '/frontsystem' })
          // }, 1000)

          // 注释登录请求
          login(this.form).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '登录成功！'
              })
              if (this.rememberpwd) {
                // 保存帐号到cookie，有效期7天
                setCookie('user', this.form.username, 7)
                // 保存密码到cookie，有效期7天
                setCookie('pwd', this.form.password, 7)
              } else {
                delCookie('user')
                delCookie('pwd')
              }
              // 如果请求成功就让他2秒跳转路由
              setTimeout(() => {
                this.logining = false
                // 缓存token
                localStorage.setItem('logintoken', res.data)
                // 缓存用户个人信息
                // localStorage.setItem('userdata', JSON.stringify(res.data))
                // this.$store.commit('login', 'true')
                this.$router.push({ path: '/frontsystem' })
              }, 1000)
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              })
              // this.$message.error(res.msg)
              this.logining = false
              return false
            }
          })
        } else {
          // 获取图形验证码
          // this.getcode()
          this.$message.error('请输入用户名密码！')
          this.logining = false
          return false
        }
      })
    }
  }
}
</script>

  <style acoped>
  .login-form {
    width: 350px;
    margin: 160px auto; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圆角 */
  }

  /* 背景 */
  .login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../assets/img/bg.png");
  }

  /* 标题 */
  .login-title {
    color: #303133;
    text-align: center;
  }
  </style>
